<template>
  <div>
    <div ref="child">这是子组件的ref</div>
    <div>父亲剩余存款：{{ modelValue }}</div>
    <div>
      <el-button @click="handlePay">向父亲要1000元</el-button>
    </div>
    <div>
      <h5>父亲的个人信息</h5>
      <div>
        <div>姓名：{{ user.name }}</div>
        <div>年龄：{{ user.age }}</div>
      </div>
      <div>
        <el-button @click="addAge">+1岁</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>

// 父级默认的v-model, modelModifiers可以做验证
const [modelValue, modelModifiers] = defineModel({
  type: Number, 
  default: 0,
  set(value) {
    if(modelModifiers.trim) {
      // 验证是不是数字，是就直接减少
      if (Number(value)) {
        return value
      } else {
        return Promise.reject(new Error('请传入数字'))
      }
    }
    return 0
  }
})
// 父级v-model声明的名称
const user = defineModel("user", {type: Object, default: () => {}})
const handlePay = () => {
  modelValue.value -= '你好'
}
function addAge() {
  user.value.age += 1
}
defineOptions({
  inheritAttrs: false, // 对class等不要默认挂在根节点上
  name: 'ChildOption' // 对组件在chrome的Vue DevTools下组件显示重命名
})
</script>

<style lang="scss" scoped>

</style>